<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery截图插件</title>
	<link rel="stylesheet" href="cropper.min.css">
<style>
    .cropper-wrapper{
    	position: relative;
    	padding-left: 120px;

    }
	.cropper-container{
		width: 700px;
		height: 400px;
		border:1px solid #ccc;
	}
	#cropperPreview{
		width: 100px;
		height: 100px;
		overflow: hidden;
		border:1px solid #ccc;
		position: absolute;
		top:0;
		left: 0;
	}
</style>
</head>
<body>
	<div class="cropper-wrapper">
		<div class="cropper-container">
			<img src="pic.jpg" alt="示例图片" id="cropperImg">
		</div>
		<div id="cropperPreview"></div>
	</div>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="cropper.min.js"></script>
	<script>
		var options = {
          aspectRatio: 1 / 1, // 截图比例1:1
          preview:$('#cropperPreview'), //预览框
          zoomable:false,  //禁止放大缩小
          viewMode:1, //只在图片区域内移动
          crop: function(data) {}
	    };

	    //初始化
	    var $image = $('#cropperImg');
	    $image.on({}).cropper(options);
	</script>
</body>
</html>